<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>6期-妖怪-图片放大镜</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      float: left;
      opacity: 1;
    }

    p {
      display: block;
      position: absolute;
      top: 10px;
      left: 10px;
      font-size: 48px;
      color: #ff0000;
    }

    .pt1 {
      border: #ff0000 solid 1px;
    }

    .pt2 {
      position: absolute;
      box-sizing: border-box;
      top: -400px;
      left: -400px;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      border: rgba(0,0,0,0.7) solid 20px;
      opacity: 0;
    }
  </style>
</head>
<body>
<div class="box">
</div>
<script>
  let box, canvas1, canvas2, ctx1, ctx2, w, h, dxy = 0, dwh = 400, num = 1, px, py, op
  let img = new Image()


  window.onload = function () {
    //禁用浏览器自带右键
    document.oncontextmenu = function (e) {
      e.preventDefault();
    }

    //定义标签
    img.src = "http://r.lvyouquan.cn/lyqpic/hold/2019-08-21/image/20190821/20190821101249_4437.jpg"
    w = window.screen.width;
    h = window.screen.height
    box = document.querySelector(".box")
    box.style.cursor = "crosshair"
    op = document.createElement("p")
    let cvs1 = document.createElement("canvas")
    let cvs2 = document.createElement("canvas")
    cvs1.className = "pt1"
    cvs2.className = "pt2"
    cvs1.width = w - 800
    cvs1.height = h - 200
    cvs2.width = 400
    cvs2.height = 400
    box.appendChild(cvs1)
    box.appendChild(cvs2)
    box.appendChild(op)
    canvas1 = document.querySelector(".pt1")
    canvas2 = document.querySelector(".pt2")
    ctx1 = canvas1.getContext("2d")
    ctx2 = canvas2.getContext("2d")
    img.onload = function () {
      ctx1.drawImage(img, 0, 0, w - 800, h - 200)
    }

    //右键效果
    document.body.oncontextmenu = function (e) {
      if (e.button === 2 && num === 1) {
        canvas2.style.opacity = "1"
        dxy = 0
        dwh = 400
        num += 1
        op.innerText = `${(num - 1) * 4}倍效果`
      } else if (e.button === 2 && num === 2) {
        canvas2.style.opacity = "1"
        dxy = -400
        dwh = 1200
        num += 1
        op.innerText = `${(num - 1) * 4}倍效果`
      } else if (e.button === 2 && num === 3) {
        canvas2.style.opacity = "0"
        dxy = 0
        dwh = 400
        num = 1
        op.innerText = ``
      }
      big()
    }

    //移动效果
    box.onmousemove = function (e) {
      px = e.pageX
      py = e.pageY
      ctx2.clearRect(0, 0, 400, 400)
      canvas2.style.top = `${py - 200}px`
      canvas2.style.left = `${px - 200}px`
      big()
    }
  }


  //放大镜
  function big() {
    ctx2.imageSmoothingEnabled = true
    ctx2.drawImage(canvas1, px - 100, py - 100, 200, 200, dxy, dxy, dwh, dwh)
    canvas2Init()
  }

  //初始化canvas1和canvas2
  function canvas2Init() {
    ctx2.strokeStyle = "green"
    ctx2.beginPath()
    ctx2.moveTo(50, 200)
    ctx2.lineTo(350, 200)
    ctx2.moveTo(200, 50)
    ctx2.lineTo(200, 350)
    ctx2.closePath()
    ctx2.stroke()
    ctx1.fillStyle = "red"
    ctx1.font = "20px serif"
    ctx1.fillText("仿8倍镜,右键开启和关闭", w * 0.4, 100)

  }
</script>
</body>
</html>
